<%--
  Created by IntelliJ IDEA.
  User: Pro
  Date: 2017/3/23
  Time: 12:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <base href="${pageContext.request.contextPath}/">
    <title>主页</title>
    <link rel="shortcut icon" href="static/assets/css/images/favicon.png">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="static/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/assets/css/main-copy.css">
    <link rel="stylesheet" href="static/assets/css/index/extra.css">
    <link rel="stylesheet" href="static/assets/css/font-awesome.min.css">
    <!--[if lte IE 8]><link rel="stylesheet" href="static/assets/css/ie8.css"/><![endif]-->
    <!--[if lte IE 9]><link rel="stylesheet" href="static/assets/css/ie9.css"/><![endif]-->
    <link rel="stylesheet" type="text/css" href="static/assets/css/index/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="static/assets/css/index/htmleaf-demo.css">
    <link href="static/assets/css/index/carousel.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="static/assets/css/liebiao.css">
</head>

<body class="landing">
<!--页面顶部 -->
<div class="page-wrapper">
    <%@include file="../../public/header.jspf" %>
    <script>
        document.getElementById('header').className = 'alt';
    </script>

    <!-- 巨幕 -->
    <div id="banner">
        <div class="inner">
            <h2 class="pb-2 font-weight-bold">电影影评</h2>
            <p class="pt-2 pb-3">影评有你才精彩</p>
            <div class="pt-sm-1">
                <button href="#one" class="btn btn-primary btn-lg scrolly"
                        style="font-family: 'Microsoft YaHei UI',serif;background: rgba(179, 179, 179, 0.68);border: double">
                    精彩浏览
                </button>
            </div>
        </div>
    </div>
</div>
<!--主体部分-->
<div id="one" class="container pt-sm-3 pt-lg-5 pt-md-5">
<%--m--%>
    <!--轮播-->
    <div class="htmleaf-container mt-4">
        <h3 class="underline">最新电影影评</h3>
        <div id="content-list"></div>
    </div>

</div>
<!--过渡-->
<div class="mt-5 text-white">
    <div class="container">
        <div class="card" style="background-color: #666666">
            <div class="card-block">
                <span>如果你对我们网站产生了浓厚的兴趣，可以点击按钮了解更多！！</span>
                <a href="" class="btn btn-outline-secondary text-white">了解更多</a>
            </div>
        </div>
    </div>
</div>

<!--页脚-->
<hr class="container" style="background-color: #616161">
<div>
    <nav class="text-center" style="font-size: small">
        <a class="item" href="#">关于我们</a>
        <a>|</a>
        <a class="item" href="#">联系我们</a>
        <a>|</a>
        <a class="item" href="#">诚信合作</a>
        <a>|</a>
        <a class="item " href="#">隐私政策</a>
        <a>|</a>
        <a class="item " href="#">不满投诉</a>
        <a>|</a>
        <a class="item " href="#">诚征英才</a>
        <a>|</a>
        <a class="item " href="#">知识产权</a>
        <a>|</a>
        <a class="item " href="#">合法经营</a>
        <a>|</a>
        <a class="item " href="#">热词搜索</a>
        <a>|</a>
        <a class="item " href="#">Contact us</a>
    </nav>
</div>
<div class="text-center" style="font-size: small">
    <a class="item" href="#">广州市黄埔区九龙大道206号</a>
    <a>|</a>
    <a class="item" href="#">广州商学院</a>
    <a>|</a>
    <a class="item" href="#">信心技术与工程学院</a>
    <a>|</a>
    <a class="item " href="#">商业软件工程2班</a>

</div>
<div class="text-center" style="font-size: small">
    <span class="text-muted">Copyright <i class="fa fa-copyright"></i> 2017.版本归"有名字就好。。。"所有</span>
</div>

<script id="content-manage-template" type="text/html">
    {{each items item index}}
    <a style="text-decoration:none;" href="article/{{item.id}}">
        <div class="box rounded col-lg-12 col-md-12 col-sm-12 m-auto pb-2 liebiao">
            <div class="row pt-3 pb-2 mt-4">
                <div class="ml-1 col-lg-2 col-md-3 col-sm-5">
                    <img class="img-fluid rounded mx-auto d-block" src={{item.image}} alt="图片加载失败">
                </div>
                <div class="col">
                    <div style="font-size: larger;">{{item.title }}</div>
                    <div style="color: black">{{ item.description }}</div>
                    <div style="color: grey;font-size: small">最后时间：&nbsp;{{item.time}}</div>
                </div>
                <%--<br><br><br>--%>
            </div>
        </div>
    </a>
    {{/each}}
</script>
<!-- Scripts -->

<script src="static/assets/js/art-template-web.js"></script>
<script src="static/assets/js/jquery.min.js"></script>
<script src="static/assets/js/tether.min.js"></script>
<script src="static/assets/js/index/jquery.scrollex.min.js"></script>
<script src="static/assets/js/index/jquery.scrolly.min.js"></script>
<script src="static/assets/js/skel.min.js"></script>
<script src="static/assets/js/util.js"></script>
<script src="static/assets/js/index/main.js"></script>
<script src="static/assets/js/bootstrap.min.js"></script>
<script src="static/assets/js/index/jssor.slider-21.1.6.min.js" type="text/javascript"></script>
<script src="static/assets/js/index/carousel.js"></script>
<script type="text/javascript">
    jQuery(document).ready(start($));
</script>
<script>
    getPage(1, 2);
    function getPage(currentPage, size) {
        var url = 'api/article/list?currentPage=' + currentPage + '&size=' + size;
        $.ajax({
            url: url,
            type: "GET",
            success: function (data) {
                // console.log(data);
                //渲染列表
                var html = template('content-manage-template', {
                    items: data.content
                });
                document.getElementById('content-list').innerHTML = html;

                //
            }
        })
    }
</script>
</body>
</html>
